<script>
export default {
  name: "asdHjad",
  data() {
    return {
      msg: "123546",
      class1: "box",
      class2: ['box'],
      flag: false,
      class3: { 'box': true },
      class4: [{ 'box': true }, { 'fs40': true }]
    }
  },
  methods: {
    add() {
      console.log(this)
    },
  }

}
</script>

<template>
  <div id="app">
    <div class="box">page</div>
    <div>
      {{ msg }}
    </div>
    <div class="box fs40">fs40fs40</div>
    <div :class="class1">fs40fs40</div>
    <!-- 1、数组 -->
    <div :class="class2">fs40fs40</div>
    <!-- 2、三目表达式 -->
    <div :class="flag?'box':'fs40'">fs40fs40</div>
    <!-- 3、对象 {'类名'：布尔类型的值}-->
    <div :class="{'box': false,'fs40':true}">fs40fs40</div>
    <div :class="class3">fs40fs40</div>
    <!-- 4、数组内置对象 -->
    <div :class="class4">class4class4</div>
    <button @click="add">16545</button>
  </div>
</template>

<style scoped lang="less">
.box {
  width: 100px;
  height: 100px;
  background-color: aqua;
}

.fs40 {
  font-size: 40px;
}
</style>